<template>
  <div>
    <!-- 
      搜索功能的关键点：
        要基于 原数组 和 搜索关键字 进行过滤筛选 得到一个新数组
        列表渲染 这个 新数组，不能直接将 过滤出来的 新数组 覆盖原数组，否则 原数据 会丢失
     -->
    <input placeholder="输入关键字搜索" v-model.trim="searchKeywords">
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v of filterUsers" :key="v.doctor">
          <td>{{ v.date }}</td>
          <td>{{ v.doctor }}</td>
          <td>{{ v.diagnosis }}</td>
          <td>{{ v.prescription }}</td>
          <td @click="showDetailDialog(v)">详情</td>
        </tr>
      </tbody>
    </table>

    <!-- 在模板中获取事件对象，用规定的$event -->
    <DetailDialog :visible="isShowDetailDialog" :user="curUser" @update:visible="isShowDetailDialog = $event" />

  </div>

</template>

<script>
import DetailDialog from './components/DetailDialog.vue'
export default {
  name: 'App',
  components: {
    DetailDialog
  },
  data() {
    return {
      // 搜索关键字
      searchKeywords: '',
      // 是否显示详情对话框
      isShowDetailDialog: false,
      // 当前用户
      curUser: {},
      // 用户列表
      users: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        }
      ]
    }
  },
  computed: {
    filterUsers() {
      return this.users.filter(v => {
        // startsWith 字符串的API，可以判断是否以 xxx 开头
        return v.doctor.startsWith(this.searchKeywords)
      })
    }
  },
  methods: {
    showDetailDialog(user) {
      // 记录当前点击的用户
      this.curUser = user
      // 显示详情对话框
      this.isShowDetailDialog = true
    }
  }
}
</script>

<style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>